<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header">Danh sách khu vực</h3>
    </div>
    <!-- /.col-lg-12 -->
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
             <div class="panel-heading">
                 <div class="row">
                     <div class="col-lg-3">
                        <a class="" href="<?php echo $this->url(array("action"=>"add")) ?>">Thêm Khu vực</a>
                     </div>
                      <div class="col-lg-3">
                        <a class="" href="<?php echo $this->baseUrl()?>/admin/areaprovincecategory/add">Thêm Tỉnh thành vào khu vực</a>
                     </div>
               </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3">
                        
                    </div>
                </div>
                <div class="table-reponsive">
                    <div id="jqxgrid">
                        
                    </div>
                </div>
        </div>
    </div>
</div>
<script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields:
                [
                    { name: 'id',type:'int'},
                    { name: 'area_id', type: 'int' },     
                    { name: 'province_id', type: 'int' },
                    { name:'area_name',type:'string'},
                    { name:'province_name',type:'string'},
                    {name:'order_name',type:'int'}
                ],
                url: "<?php echo $this->baseUrl().'/admin/area/service' ?>",
                sortcolumn: 'order_name',
                sortdirection: 'desc'
            };
         var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                }
            });
            $("#jqxgrid").jqxDataTable(
            {
                source: dataAdapter,
                theme:'bootstrap',
                pageable: true,
                altRows: true,
                sortable: false,
                groups: ['area_name'],
                width: '100%',
                groupsRenderer: function(value, rowData, level)
                {
                   var str= value.split("||");
//                     var value = $("#jqxgrid").jqxDataTable('getCellValue', 0, 'id');
//                    var url = "<div class='row'>";
//                    url=url+"<div class='col-lg-3'>";
////                    url=url+ dataRecord[editrow]['area_id'];
//                    url=url+"</div>";
//                    url=url+"</div>";
//                    return url;
                    var url= "<a href='<?php echo $this->baseUrl()?>/admin/area/edit/id/"+str[1]+"'>Khu vực: " + str[0]+"</a>";   
                    url = url + "<a class='fa fa-trash-o fa-lg pull-right' href='#' onclick='return jsdeletearea("+str[1]+")''></a></div>";
                    return url;
                },
                ready: function () {
                    $("#jqxgrid").jqxDataTable('hideColumn', 'id');
                },
                columns: [ 
                  { text: 'Id',hidden:true,dataField:'id',cellsalgin:'right',width:0},
                  { text: 'area_id',hidden:true,dataField:'area_id',cellsalgin:'right',width:0},
                  { text: 'province_id',hidden:true,dataField:'province_id',cellsalgin:'right',width:0},
                  { text: 'Tên Khu vực',hidden:true,editable: false, dataField: 'area_name', width: 425 },
                  { text: 'Tỉnh thành', editable: false, dataField: 'province_name', width:'60%' },
                  
                  {
                    text: 'Sửa', cellsAlign: 'center', align: "center", width:'20%' ,columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          editrow = row;
                          var dataRecord = $("#jqxgrid").jqxDataTable('getRows');
                          if(dataRecord[editrow]['id']===0){
                              url="";
                              return url;
                          } else {
                               var url= "<div style='overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: center; margin-right: 2px; margin-left: 4px; margin-top: 4px;'><a class='fa fa-edit fa-lg'";
                               url = url + "href='<?php echo $this->baseUrl()?>/admin/areaprovincecategory/edit/id/"+dataRecord[editrow]['id']+"'></a></div>";
                               return url;
                          }
                      }
                  },
                  {
                    text: 'Xóa', cellsAlign: 'center', align: "center", width:'20%' ,columnType: 'none', editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
                          editrow = row;
                          var dataRecord = $("#jqxgrid").jqxDataTable('getRows');
                          if(dataRecord[editrow]['id']===0){
                              url="";
                              return url;
                          } else {
                               var url= "<div style='overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: center; margin-right: 2px; margin-left: 4px; margin-top: 4px;'><a class='fa fa-trash-o fa-lg'";
                               url = url + "href='#' onclick='return jsdelete("+dataRecord[editrow]['id']+")''></a></div>";
                               return url;
                          }
                      }
                  }
                ]
            });
           
        });
    </script>
    <script type="text/javascript">
        function jsdelete(id)
        {
            bootbox.confirm("Bạn có chắc muốn xóa tỉnh này ra khỏi khu vực này?",
            function(result){
            if(result == true)
            {
                return window.location = "<?php echo $this->baseUrl() ?>/admin/areaprovincecategory/delete/id/"+id;
            }
            });
        }
        function jsdeletearea(id)
        {
            bootbox.confirm("Bạn có chắc muốn xóa khu vực này ra khỏi hệ thống?",
            function(result){
            if(result == true)
            {
                return window.location = "<?php echo $this->baseUrl() ?>/admin/area/delete/id/"+id;
            }
            });
        }
    </script>